@media screen and (max-width:765px) {
  .demo{
    .addVideo{
      display: none;
    }
    .searchInput{
      display: none;
    }
    .searchList{
      display: none;
    }
    .menu{
        position: absolute;
        top: 50px;
        right: 0;
        z-index: 999999;
        background-color: rgba(0, 0, 0, .5);
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        padding: 3px 10px;
        div{
          margin-top: 7px;
          width: 20px;
          height: 2px;
          background-color: #fff;
          transition: all .3s;
        }
    }
    .MSearchOrAdd{
      padding: 15px;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, .5);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      top: 50px;
      right: 0;
      z-index: 9999;
      transition: all .5s ease-in-out;
      transform-origin: right top;
    .MsearchInput {
    width: 100%;
    margin-top: 25px;
    i {
      color: #fff;
      font-size: 18px;
      transition: all 0.3s;
      display: inline-block;
      &:hover {
        color: #fff;
      }
      &:active {
        transform: scale(2);
      }
    }
    input {
      box-sizing: border-box;
      margin-right: 10px;
      border: none;
      height: 30px;
      border-radius: 30px;
      width: 85%;
      padding: 5px 15px;
      transition: all 0.3s;
      &:focus {
        box-shadow: 0 0 10px 0px red;
      }
    }
  }
  .MaddVideo {
    // display: none;
    margin: 15px 20px;
    z-index: 9991;
    .box {
      width: 100%;
      height: 2px;
      background: -webkit-linear-gradient(
        left,
        rgba(255, 255, 255, 0.1) -4%,
        #000 50%,
        rgba(255, 255, 255, 0.1) 100%
      );
    }
    .add {
      display: flex;
      align-items: center;
      justify-content: center;
      .right {
        margin: 15px;
        width: 180px;
        height: 180px;
        border: 3px solid #fff;
        border-radius: 15px;
        transition: all 0.4s;
        background-color: rgba(255, 255, 255, 0.3);
        padding: 10px;
        text-align: center;
        p {
          @font-face {
            font-family: "left";
            src: url("../../assets/font/5f4613febb8ec1598428158.woff");
            src: url("../../assets/font/5f4613febb8ec1598428158.woff")
              format("woff");
          }
          font-family: left;
          font-size: 30px;
        }
        span {
          font-size: 105px;
          line-height: 80px;
          font-weight: 100;
          color: #fff;
          transition: all 0.4s;
        }
        &:hover {
          border-color: cyan;
          span {
            color: cyan;
          }
        }
      }
    }
  }
  .MsearchList{
    top: 70px;
    left: 30px;
  }
    }
  }
}
.active{
  transform-origin: center;
  div:nth-child(1){
    height: 2px;
    transform:  translateY(9px) rotate(45deg);
  }
  div:nth-child(2){
    opacity: 0;
  }
  div:nth-child(3){
    height: 2px;
    transform: translateY(-9px) rotate(-45deg);
  }
}